import ImageLayer from 'ol/layer/Image';
import VideoRenderer from './videoRenderer';
let defaultOptions = {
    autoplay: true,
    loop: true,
}
export default class VideoLayer extends ImageLayer {
    constructor(options) {
        super()
        let __options = Object.assign(defaultOptions, options)
        this.__options = __options
        
        this.videoInit()

        console.log(__options);
        
    }

    videoInit(){
        this.frameState = null;
        this.target = null;
        this.__VDOM = this.createVideo()
        this.videoRenderer = this.createVideoRenderer()
        this.setExtent(this.__options.extent)
    }

    render(frameState, target) {
        this.frameState = frameState
        this.target = target
        this.videoRenderer.render(frameState, target)
    }

    createVideoRenderer() {
        return new VideoRenderer(this);
    }

    setVideoDomStyle() {
        this.__VDOM.style.zIndex = -1
        this.__VDOM.style.position = 'absolute'
        this.__VDOM.style.left = 0
        this.__VDOM.style.top = 0
        this.__VDOM.style.pointerEvents = 'none'
        this.__VDOM.style.opacity = 0.001
    }

    setVideoDomAttr(attrs){
        for(let i in attrs){
            this.__VDOM[i] = attrs[i]
        }
    }
    
    setVideoDomAttrs() {
        this.__VDOM.autoplay = this.__options.autoplay
        this.__VDOM.loop = this.__options.loop
        this.__VDOM.muted = true
        this.__VDOM.src = this.__options.src
    }

    createVideo() {
        let __VDOM = document.createElement('video')
        document.body.appendChild(__VDOM)
        this.__VDOM = __VDOM
        this.setVideoDomStyle()
        this.setVideoDomAttrs()
        __VDOM.ontimeupdate = () => {
            this.render(this.frameState, this.target)
        }
        return __VDOM
    }

}
